<template>
  <div class="wrap">
    <header-top title="业务单据" />
    <div class="content">
      <div class="content_info">
        <div class="con_nav">
          <span class="nav_s">|</span> <span>营销管理</span>
        </div>

        <div class="con_main">
          <div
            @click="handleGoToPath(hoverData.name)"
            v-for="hoverData in hoverTabDataYingXiao"
            :key="hoverData.name"
          >
            <hover-tab
              :name="hoverData.name"
              :content="hoverData.content"
              :picsrc="hoverData.picsrc"
              :column="column"
            />
          </div>
        </div>
      </div>

      <div class="content_info">
        <div class="con_nav">
          <span class="nav_s">|</span> <span>培训管理</span>
        </div>
        <div class="con_main">
          <div
            @click="handleGoToPath(hoverData.name)"
            v-for="hoverData in hoverTabDataPeiXun"
            :key="hoverData.name"
          >
            <hover-tab
              :name="hoverData.name"
              :content="hoverData.content"
              :picsrc="hoverData.picsrc"
              :column="column"
            />
          </div>
        </div>
      </div>

      <div class="content_info">
        <div class="con_nav">
          <span class="nav_s">|</span> <span>安检管理</span>
        </div>
        <div class="con_main">

          <div
            @click="handleGoToPath(hoverData.name)"
            v-for="hoverData in hoverTabDataAnJian"
            :key="hoverData.name"
          >
            <hover-tab
              :name="hoverData.name"
              :content="hoverData.content"
              :picsrc="hoverData.picsrc"
              :column="column"
            />
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerTop from "../components/HeaderTop";
import HoverTab from "./components/HoverTab";

export default {
  name: "bill",
  data() {
    return {
      hoverTabDataYingXiao: [
        {
          name: "paidan",
          content: "派单管理",
          picsrc: "../../../images/bill/paidan.png",
        },
        {
          name: "hedan",
          content: "合单管理",
          picsrc: "../../../images/bill/hedan.png",
        },
        {
          name: "duban",
          content: "督办管理",
          picsrc: "../../../images/bill/duban.png",
        },
      ],
      hoverTabDataPeiXun: [
        {
          name: "peixun",
          content: "在线培训",
          picsrc: "../../../images/bill/peixun.png",
        },
        {
          name: "kaoshi",
          content: "在线考试",
          picsrc: "../../../images/bill/kaoshi.png",
        },
      ],
      hoverTabDataAnJian:[
        {
          name: "weijin",
          content: "违禁品记录",
          picsrc: "../../../images/bill/weijin.png",
        },
        {
          name: "anjian",
          content: "安检日记录",
          picsrc: "../../../images/bill/anjian.png",
        },
        {
          name: "zhiyuanzhe",
          content: "志愿者信息",
          picsrc: "../../../images/bill/zhiyuanzhe.png",
        },
      ],
      column: 3,
    };
  },
  components: {
    headerTop,
    HoverTab,
  },
  mounted() {},
  methods: {
    handleGoToPath(name) {
      console.log(name);
      if (name) {
        this.$router.push(name);
      }
    },
    // exam() {
    //   this.$router.push({ path: "/kaoshi" });
    // },
    // cultivate() {
    //   this.$router.push({ path: "/peixun" });
    // },
    // dispatch() {
    //   this.$router.push({ path: "/paidan" });
    // },
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "../common/stylus/mixin.styl"
.wrap{
    background-color #f5f5f5
    height 100vh
    font-size 13px
    color #333333
    .content{
      margin-left 15px
      .content_info{
        .con_nav{
          font-size 15px
          line-height 40px
          font-weight bold
          .nav_s{
            border-radius: 4px;
            font-weight 800
            color #198AFF
            width 10px
            height 16px
            display:inline-block
          }

        }
        .con_main{
          width 345px
          background-color #fff
          border-radius 5px
          display flex
          justify-content flex-start
          text-align center
          .main_info{
            width 30%
            line-height 20px
            margin 0 0px 0 6px
            img{
              width 26px
              height 30px
              margin 15px 0  2px 0
              // vertical-align middle
            }
            p{
              margin-bottom 8px
            }
          }
        }
      }
    }
}
</style>
